<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>密码框placeholder 兼容至IE7</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            div{width:300px;height: 50px;position: relative;margin: 20px auto;}
            .span{position: absolute;height:50px;display: inline-block;line-height: 50px;width: 300px;z-index: -1;border: 2px solid #111;left: 0;top:0;}
            #password{width: 300px;height: 50px;line-height: 48px;opacity: 0;filter:alpha(opacity=0);border:2px solid #111;outline: none;margin:0;padding: 0;float: left;}
        </style>
    </head>
    <body>
        <div>
            <span class="span">请输入密码</span>
            <input type="password" id="password">
        </div>
        <script src="jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
           $("#password").focus(function(){
              $(this).css("opacity",1);
              $(this).css("filter","alpha(opacity=100)");
       });
       $("#password").blur(function(){
           if($(this).val()){
               $(this).css("opacity",1);
               $(this).css("filter","alpha(opacity=100)");
           }else{
               $(this).css("opacity",0);
               $(this).css("filter","alpha(opacity=0)");
           }
       });
        </script>
    </body>
</html>
